<template>
  <div class="box-select" :style="getSelectBoxStyle"></div>
</template>

<script>
export default {
  name: 'BoxSelect',
  props: {
    positionId: {
      type: String,
      default: 'main'
    },
    scrollId: {
      type: String,
      default: 'scroll'
    },
    elementClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectBox: {
        left: 0,
        top: 0,
        width: 0,
        height: 0,
        background: '#22799a',
        opacity: '0.5'
      },
      parentPosition: {
        x: 0,
        y: 0
      },
      elementsInfo: [],
      positionElement: ''
    }
  },
  computed: {
    getSelectBoxStyle() {
      return {
        left: this.selectBox.left - this.parentPosition.x + 'px',
        top: this.selectBox.top - this.parentPosition.y + 'px',
        width: this.selectBox.width + 'px',
        height: this.selectBox.height + 'px',
        background: this.selectBox.background,
        opacity: this.selectBox.opacity
      }
    }
  },
  mounted() {
   this.positionElement = document.getElementById(this.positionId)
    this.parentPosition = this.positionElement.getBoundingClientRect()
    this.positionElement.addEventListener('mousedown', this.handleDown)
  },
  beforeDestroy() {
    this.positionElement.removeEventListener('mousedown', this.handleDown)
  },
  methods: {
    handleDown(e) {
      const startX = e.clientX
      const startY = e.clientY
      this.getAllElementInfo()
      this.parentPosition = this.positionElement.getBoundingClientRect()

      const scrollEle = document.getElementsByClassName('app-main')[0]
      // const scrollEle = document.getElementById(this.scrollId)
      const oldScroll = {
        x: scrollEle.scrollLeft,
        y: scrollEle.scrollTop
      }
      let moveX = 0
      let moveY = 0

      const move = (mE) => {
        moveX = mE.clientX
        moveY = mE.clientY
        setSelectBox()
      }

      const up = () => {
        this.positionElement.removeEventListener('mousemove', move)
        this.positionElement.removeEventListener('mouseup', up)
        scrollEle.removeEventListener('scroll', wheel)
        this.getSelectElements()
        this.selectBox = {
          ...this.selectBox,
          left: 0,
          top: 0,
          width: 0,
          height: 0
        }
      }

      const wheel = () => {
        setSelectBox()
      }

      const setSelectBox = () => {
        const scrollOffsetX = scrollEle.scrollLeft - oldScroll.x
        const scrollOffsetY = scrollEle.scrollTop - oldScroll.y
        this.selectBox.left = moveX + scrollOffsetX <= startX ? moveX + scrollOffsetX : startX
        this.selectBox.top = moveY + scrollOffsetY <= startY ? moveY + scrollOffsetY : startY
        this.selectBox.width = Math.abs(moveX - startX + scrollOffsetX)
        this.selectBox.height = Math.abs(moveY - startY + scrollOffsetY)
      }

      this.positionElement.addEventListener('mousemove', move)
      this.positionElement.addEventListener('mouseup', up)
      scrollEle.addEventListener('scroll', wheel)
    },
    getAllElementInfo() {
      const elements = document.getElementsByClassName(this.elementClass)
      this.elementsInfo = []
      const len = elements.length
      for (let i = 0; i < len; i++) {
        const position = elements[i].getBoundingClientRect()
        this.elementsInfo.push(position)
      }
    },
    getSelectElements() {
      const { left, top, width, height } = this.selectBox
      const right = left + width
      const bottom = top + height
      const findElements = this.elementsInfo.filter(element => {
        return !(element.left > right || element.right < left || element.top > bottom || element.bottom < top)
      })
      console.log(findElements)
    }
  }
}
</script>

<style lang="scss" scoped>
.box-select {
  position: absolute;
  z-index: 9999
}
</style>
